<!--
     /**
      * 纵向表格
      * @desc 纵向表格基本功能，两列式
      * @author lj 16076
      * @date 2018年07月30日10:20
      * @example 调用示例
      *  <mailTable :tableData="tableData" :tableStyle="{ width:'600px' }"></mailTable>
      */
       -->
<template>
  <table class="mailTable" :style="styleObject" v-if="s_showByRow">
    <tr v-for="index in rowCount">
      <td class="column">{{tableData[index*2-2].key}}</td>
      <td>{{tableData[index*2-2].value}}</td>
      <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ''}}</td>
      <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ''}}</td>
    </tr>
  </table>
  <table class="mailTable" :style="styleObject" v-else>
    <tr v-for="index in rowCount">
      <td class="column">{{tableData[index-1].key}}</td>
      <td>{{tableData[index-1].value}}</td>
      <td class="column">{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : ''}}</td>
      <td>{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : ''}}</td>
    </tr>
  </table>
</template>

<script>
  export default {
    data() {
      return {
        styleObject: {},
        s_showByRow: true,
      };
    },
    props: ['tableData', 'tableStyle', 'showByRow'],
    computed: {
      rowCount: function () {
        return Math.ceil(this.tableData.length / 2);
      }
    },
    created() {
      this.styleObject = this.tableStyle;
      if (this.showByRow !== undefined) {
        this.s_showByRow = this.showByRow;
      }
    },
  }
</script>
